<template>
  <div class="page-container">
    <!-- 上部区域 -->
    <div class="top-section">
      <span class="back-icon" @click="goToPage('index')">
        <img class="arrow" src="@/assets/xiangmujindu/arrow_right.png" style="width: 22px;margin-left: 10px; transform: rotate(180deg);" /></span>
      <h3 class="title">项目详情</h3>
    </div>

    <!-- 中部区域 -->
    <div class="content-section">
      <!-- 区域1 -->
      <div class="card">
        <!-- 1.1 部分 -->
        <div class="section">
          <div class="left-text">
            <span class="badge">{{this.$route.query.category}}</span>
            <span class="title-text">基础信息</span>
          </div>
          <img
            src="@/assets/xiangmujindu/icon_qrcode.png"
            class="qr-code"
            alt="QR Code"
            @click="handleQRCodeClick"
          />
        </div>
        <div class="separator"></div>
        <!-- 1.2 部分 -->
        <div class="section column">
          <div class="basic_info">
            <div class="row">
              <p style="margin-top:-5px;">
                {{this.$route.query.title}}
              </p>
              <img
                  :src="tupianSrc"
                  class="icon"
                  alt="Icon"
                />
            </div>
            <div class="row">
              <p>{{this.$route.query.subTitle}}</p>
            </div>
            <div class="row">
              <p>{{this.$route.query.jifangdizhi}}</p>
            </div>
            <div class="row">
              <p>{{this.$route.query.gongzuoneirong}}</p>
            </div>
            <div class="row">
              <p>{{this.$route.query.jihuashijian}}</p>
            </div>
            <div class="row">
              <p>外雇签到: 否</p>
            </div>
          </div>
        </div>
        <!-- <div class="separator"></div> -->
        <!-- 1.3 部分 -->
        <div class="section">
          <div class="contact">
            <img
              src="@/assets/xiangmujindu/icon_phone.png"
              class="phone-icon"
              alt="Phone"
            />
            <span class="contact-text">联系售前</span>
          </div>
        </div>
        <!-- <div class="separator"></div> -->
        <!-- 1.4 部分 -->
        <div class="section button-group">
          <!-- <div class="button">
            <img src="@/assets/xiangmujindu/dp_icon_clsq.png" alt="Icon" />
            <span>差旅申请</span>
          </div> -->
          <div class="button" @click="goToPage('kaoqinshenpi_workin')">
            <img src="@/assets/xiangmujindu/dp_icon_kqsp.png" alt="Icon" />
            <span>考勤审核</span>
          </div>
          <div class="button" @click="goToPage('paigongpaiban')">
            <img src="@/assets/xiangmujindu/dp_icon_pg.png" alt="Icon" />
            <span>派工</span>
          </div>
          <div class="button" @click="goToPage('jiedan')">
            <img src="@/assets/xiangmujindu/dp_icon_jd.png" alt="Icon" />
            <span>结单</span>
          </div>
          <div class="button" @click="goToPage('daka')">
            <img src="@/assets/xiangmujindu/dp_icon_dk.png" alt="Icon" />
            <span>打卡</span>
          </div>
        </div>
      </div>

      <!-- 区域2 -->
      <div class="card">
        <div class="tabs">
          <div
            class="tab"
            :class="{ active: activeTab === 1 }"
            @click="activeTab = 1"
          >
            项目进度
          </div>
          <div
            class="tab"
            :class="{ active: activeTab === 2 }"
            @click="activeTab = 2"
          >
            派工安排
          </div>
          <div
            class="tab"
            :class="{ active: activeTab === 3 }"
            @click="activeTab = 3"
          >
            工作量
          </div>
          <div
            class="tab"
            :class="{ active: activeTab === 4 }"
            @click="activeTab = 4"
          >
            需求信息
          </div>
        </div>
        <div class="tab-content">
          <!-- Tab 1 内容 -->
          <div v-if="activeTab === 1">
            <div class="timeline">
              
              <!-- <div v-for="(item, i) in timelineList" :key="item.name" class="timelineItem">
                <span :class="['itemDot', item.type] ">{{ item.type === 'itemDotDone' ? '✔' : '' }}</span>
                <span :class="[(i < timelineList.length - 1) && 'itemdash', 'itemdash_' + item.type]"></span>
                <div>{{ item.name }}</div>
                <div style="color: #ccc;font-size: 12px;">{{ item.time }}</div>
              </div> -->
              <timeline :lines="getName()"/>

              <!-- <div class="timelineItem">
                <div>派工</div>
                <div style="color: #ccc;">完成时间：2024-09-15 12:10:11</div>
              </div>
              <div class="timelineItem">
                <div>实施中</div>
              </div>
              <div class="timelineItem">
                <div>完成</div>
              </div> -->
            </div>
            <div class="tab-section">
              <h2 class="tab-title">施工要求</h2>
              <p style="line-height: 25px">
                一、配线设备机架安装要求:<br />1、采用下走线方式时，架底位置与电缆上线孔相对应;<br />2、各直列垂直倾斜误差不应大于3mm，底座水平误差每平方米不应大于2mm;<br />3、接线端子各种标志应齐全;<br />4、交接箱或暗线箱宜暗设在墙内。预留墙洞安装，箱底高出地面宜为500~1000mm。<br />二、各类接线模块安装要求:<br />1、模块设备应完整，安装就位，标志齐全;<br />2、安装螺丝必须拧紧，面板应保持在一个水平面上。
              </p>
            </div>
            <div class="tab-section">
              <h2 class="tab-title">人员要求</h2>
              <p>需含登高证、电工证</p>
            </div>
            <div class="tab-section">
              <h2 class="tab-title">验收要求</h2>
              <p style="line-height: 26px;">
                1、缆线的布放前应核对规格、程式、路由及位置与设计规定相符。<br />2、缆线的布放应平直，不得产生扭绞、打圈等现象，不应受到外力的挤压和损伤。<br />3、缆线在布放前两端应贴有标签、以表明起始和终端位置，标签书写应清晰、端正和正确。
              </p>
            </div>
          </div>
          <!-- Tab 2 内容 -->
          <div v-if="activeTab === 2">
            <h2 class="tab-title">查看排班计划</h2>
            <p>
              派单时间: 2024-09-09
              12:20:28&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分派人员数: 5人
            </p>
            <div class="separator"></div>

            <p>
              派单时间: 2024-09-23
              13:46:02&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分派人员数: 7人
            </p>
            <div class="separator"></div>
          </div>
          <!-- Tab 3 内容 -->
          <div v-if="activeTab === 3"  class="schedule-table">
            <table>
              <thead>
                <tr :style="{ background: '#F0F6E8', textAlign:'justify',fontSize:'12px' }">
                  <th>实施类型</th>
                  <th>二级分类</th>
                  <th>数量</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>安装</td>
                  <td>超5类 CAT5E-网络跳线</td>
                  <td>20米</td>
                </tr>
                <tr>
                  <td>安装</td>
                  <td>超5类 CAT5E-网络跳线</td>
                  <td>10米</td>
                </tr>
                <tr>
                  <td>安装</td>
                  <td>超5类 CAT5E-网络跳线</td>
                  <td>20米</td>
                </tr>
                <tr>
                  <td>安装</td>
                  <td>超5类 CAT5E-网络跳线</td>
                  <td>20米</td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- Tab 4 内容 -->
          <div v-if="activeTab === 4" class="need_info">
            <p>需求编号: 2837273</p>
            <p>需求名称: 阳泉D4模组H800集群布线集成服务</p>
            <p>关联项目: 英业达字节跳动综合布线2024年</p>
            <p>计划时间: 2024-09-18至2024-09-30预计2人天</p>
            <p>业务类型: 布线</p>
            <p>时效要求: 一般优先级-10个工作日</p>
            <p>计费方式: 工作量</p>
          </div>
        </div>
      </div>
    </div>

    <div 
      v-show="qrVisi"
      style="width: 65%;border: 1px solid #F1F2F7; background-color: #FFF; border-radius: 8px; position: fixed;top: 30%;left: 17%;text-align: center;padding: 10px;">
      <p style="font-size: 16px;font-weight: bold; ">加入项目</p>
      <img src="@/assets/xiangmujindu/dakaqrCode.png" style="display: inline-block;width: 85%;" alt="" srcset="">
      <p style="display: inline-grid;font-size: 13px;width:80%; background-color: #EBEAE9;border-radius: 5px;padding: 8px 0;" @click="qrVisi = false">关闭</p>
    </div>  
  </div>
</template>

<script>
import timeline from '../components/timeline.vue'
import chouSrc from '@/assets/xiangmujindu/dp_tab_choubeizhong.png'
import shiSrc from '@/assets/xiangmujindu/dp_tab_shishizhong@3x.png'
import wanSrc from '@/assets/xiangmujindu/dp_tab_yiwancheng.png'


export default {
  components: {timeline},
  data() {
    return {
      qrVisi: false,
      activeTab: 1, // 默认选中的 Tab
      timelineList: [
        {
          name: '派工',
          time: '完成时间：2024-09-15 12:10:11',
          type: 'itemDotDone'
        },
        {
          name: '实施中',
          time: '',
          type: 'itemDotIng'
        },
        {
          name: '完成',
          time: '',
          type: 'itemDotNo'
        }
      ],
      lines: {
        chou: [
          {
            type: 'ing', // ing no
            label: '派工',
          },
          {
            type: 'ing', // ing no
            label: '实施中',
            // time: '接单时间：2024-09-15 12:10:11'
          },
          {
            type: 'no', // ing no
            label: '完成',
          }
        ],

        shi: [
          {
            type: 'done', // ing no
            label: '派工',
            time: '完成时间：2024-09-16 14:23:41'
          },
          {
            type: 'ing', // ing no
            label: '实施中',
          },
          {
            type: 'no', // ing no
            label: '完成',
          }
        ],

        wan: [
          {
            type: 'done', // ing no
            label: '派工',
            time: '完成时间：2024-09-15 12:10:11'
          },
          {
            type: 'done', // ing no
            label: '实施中',
            time: '完成时间：2024-09-16 14:23:41'
          },
          {
            type: 'no', // ing no
            label: '完成',
          }
        ]
      },

      tupian: {
        chou: chouSrc,
        shi: shiSrc,
        wan: wanSrc
      },

      tupianSrc: ''
    };
  },

  methods: {
    getName () {
      let list = []
      // this.$route.params.name
      switch (sessionStorage.getItem('name')) {
        case '筹备中':
          this.tupianSrc = this.tupian.chou
          return this.lines.chou
        case '实施中':
          this.tupianSrc = this.tupian.shi
          return this.lines.shi
        case '已完成':
          this.tupianSrc = this.tupian.wan
          return this.lines.wan

        default:
          this.tupianSrc = this.tupian.chou
          return this.lines.chou
      }
    },
    goToPage (page) {
      this.$router.push({ name: page })
    },
    // 跳转到指定页面
    navigateTo(page) {
      this.$router.push({ path: 'page' });
    },
    // 点击二维码的处理逻辑
    handleQRCodeClick() {
      console.log("二维码被点击");
      this.qrVisi = true
    },
  },
  mounted () {
    // this.getName()
  }
};
</script>

<style scoped>
.page-container {
  width: 100%;
  height: 100%;
  padding: 5px;
  font-size: 13px;
  background: linear-gradient(to right, #f0effd, #ebf9f9);
}

.top-section {
  display: flex;
  align-items: center;
  justify-content: center;
  height:60px;
}

.back-icon {
  position: absolute;
  left: 5px;
  font-size: 20px;
  padding-top: 11px;
}

.title {
  font-size: 16px;
  font-weight: bold;
}

.content-section {
  margin-top: 10px;
}

.card {
  background: #fff;
  border-radius: 8px;
  padding: 5px;
  margin-bottom: 10px;
}

.section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 4px;
}

.section .phone-icon {
  width: 20px;
  height: 20px;
}

.section .contact {
  display: flex;
  justify-content: center;
  align-items: center; /* 如果需要垂直居中，可以加上这个属性 */
}

.section .contact span {
  padding-left: 10px;
}

.button-group {
  background-color: #f4f5f9;
  padding: 5px 20px;
    border-radius: 5px;

}
.button-group img {
  width: 40px;
  height: 40px;
}

.section .button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.badge {
  background: #c89604;
  color: white;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 12px;
}

.title-text {
  font-size: 15px;
  font-weight: bold;
  margin-left: 5px;
}

.qr-code {
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.separator {
  height: 1px;
  background: #f4f5f9;
  margin: 5px 0;
}

.section .basic_info {
  color: #9d9e9f;
}

.section .basic_info .row {
  padding: 3px 0px;
  display: flex;
}

.section .basic_info img {
  width: 51px;
  height:17px;
  margin-top: -5px;
    padding-left: 5px;
}

.tabs {
  display: flex;
  gap: 5px;
  font-size: 13px;
  padding: 5px;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 5px;
  border-radius: 8px;
  background: #f4f5f9;
  cursor: pointer;
  padding: 10px 0px;
  font-size: 13px;
}

.tab.active {
  background: #f0f6e8;
  color: #7e9b4f;
  padding: 10px 0px;
  font-size: 13px;
}

.tab-content {
  padding: 5px 5px;
}

.tab-content h2{  
  margin: 7px 0px;
}

.tab-content p{
  padding: 5px;
}

.tab-section{
    margin-top:10px;

}

.tab-title {
  font-size: 14px;
  background: linear-gradient(to right, #b0d274, #ffffff);
  background-size: 60% 30%;
  background-repeat: no-repeat;
  background-position: 0 18px;
  padding: 5px 0px;
  /* border-radius: 5px; */
  width: 100px;
}


/** 表格样式 */
.schedule-table table {
  width: 100%;
  border-collapse: collapse;
}

table,
tr,
td {
  font-size: 10px;
}
.schedule-table th,
.schedule-table td {
  border: 1px solid #ddd;
  padding: 10px;
  font-size:13px;
}
.schedule-table th {
  background-color: #f0f6e8;
}
/* 第四个tab */
.need_info{
    color:#9D9E9F;
}
.timeline {
  /* display: flex; */
  /* justify-content: space-between; */
  background: #f4f5f9;
  border-radius: 8px;
  padding: 5px 5px 5px 5px;
  /* padding-left: 36px; */
}
.timelineItem {
  font-size: 14px;
  position: relative;
  padding: 12px 0;
}
.itemDot {
  position: absolute;
  left: -18px;
  top: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid #7e9b4f;
  /* background-color: #7e9b4f; */
}
.itemDotDone {
  background-color: #7e9b4f;
  width: 16px;
  height: 16px;
  left: -22px;
  top: 16px;
  line-height: 12px;
  text-align: center;
  color: #fff;
  font-size: 10px;
}
.itemDotIng {
  background-color: #7e9b4f;
}
.itemDotNo {
  border: 2px solid #7e9b4f;
}
.itemdash {
  position: absolute;
  width: 4px;
  height: 38px;
  left: -15px;
  top: 36px;
  border-left: 2px dashed #7e9b4f;
}
.itemdash_itemDotIng {
  height: 37px;
  top: 19px;
}
</style>
